/* 背景音乐 */
.bg-mp3 {
  position: absolute;
  top: 4.5rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: url(../images/open.png) no-repeat center center;
  background-size: contain;
  display: none;
  z-index: 9999;
}

.bg-mp3.close {
  background: url(../images/close.png) no-repeat center center;
  background-size: cover;
}

/* 加载页 */
#loading {
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 99999;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/loading4.png) no-repeat center center;
  background-size: cover;
}

#loading .loading-wrap {
  height: 1.6rem;
  margin-top: 13%;
  margin-left: 36.5%;
  font-size: .8rem;
}

/* 封面页 */
.fm {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: url(../images/fm-gif.gif) no-repeat center center;*/
  background: url(../images/fm4.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.fm .logo {
  position: absolute;
  left: 3rem;
  top: 1rem;
  width: 11rem;
}

.fm .fm-start {
  position: absolute;
  left: 60%;
  top: 60%;
  width: 4.5rem;
  height: 4.5rem;
  background: url(../images/fm-start.gif) no-repeat center center;
  background-size: cover;
}
/*.fm .fm-start {*/
/*  position: absolute;*/
/*  left: 16rem;*/
/*  top: 6.5rem;*/
/*  width: 4.5rem;*/
/*  height: 4.5rem;*/
/*  background: url(../images/fm-start.gif) no-repeat center center;*/
/*  background-size: cover;*/
/*}*/

/* 第一页 */
.first-page {
  width: 100%;
  height: 100%;
  background: url(../images/bg3.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.first-page .first-page-tips {
  width: 30rem;
  display: block;
  position: absolute;
  left: calc(50% - 15rem);
  top: 11.8rem;
  display: none;
}

.first-page .box {
  width: 33.8rem;
  height: 14.3rem;
  background: url(../images/newbg0.png) no-repeat center center;
  background-size: cover;
  margin: 5.6rem auto 0;
  position: relative;
  overflow: hidden;
  display: none;
}

.first-page .box .ok, .first-page .box .err {
  width: 100%;
  position: absolute;
  left: 0;
  top: 6.1rem;
  z-index: 2;
  display: none;
}

.first-page .box span {
  display: block;
  width: 7.8rem;
  height: 2.9rem;
  position: absolute;
}

.first-page .box span:nth-of-type(1) {
  top: 6.9rem;
  left: 3.4rem;
}

.first-page .box span:nth-of-type(2) {
  top: 6.9rem;
  left: 14.6rem;
}

.first-page .box span:nth-of-type(3) {
  top: 6.9rem;
  left: 25.6rem;
}

.first-page .box span:nth-of-type(4) {
  top: 10.6rem;
  left: 3.4rem;
}

.first-page .box span:nth-of-type(5) {
  top: 10.6rem;
  left: 14.6rem;
}

.first-page .box span:nth-of-type(6) {
  top: 10.6rem;
  left: 25.6rem;
}

/* 顶部进度条 */
.top-box {
  position: absolute;
  top: 1.0rem;
  left: 0;
  width: 100%;
  z-index: 999;
  display: none;
}

.top-box .top {
  width: 37rem;
  height: 3.5rem;
  margin: 0 auto;
  background: url(../images/progress-bg.png) no-repeat center 20%;
  background-size: cover;
  display: flex;
  align-items: center;
}

.top-box .progress-box {
  width: 31.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -.5rem auto 0;
}

.top-box .progress-box .progress-bar {
  position: absolute;
  z-index: 1;
  left: -1.8rem;
  top: .7rem;
  width: 35rem;
  height: .32rem;
}

.top-box .progress-bar .t {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #F9F5EF;
  border-radius: 20px;
}

.top-box .progress-bar .b {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: #C72626;
  border-radius: 20px;
  transition: all 1s;
}

.top-box .progress-box img {
  position: relative;
  z-index: 3;
  width: 2.3rem;
}

/* 解锁数据故事答题按钮 */
.answer-btn {
  position: absolute;
  top: 20.5rem;
  right: 2rem;
  width: 9rem;
  height: 2.5rem;
  background: url(../images/unlock-btn.gif) no-repeat center center;
  background-size: cover;
  display: none;
}

/* 下一步按钮 */
.next-btn {
  position: absolute;
  top: 18.5rem;
  right: 2.5rem;
  width: 6.5rem;
  height: 2.2rem;
  background: url(../images/next-btn.png) no-repeat center center;
  background-size: contain;
  z-index: 999999;
  display: none;
}


/* 答题页 */
.answer-page {
  width: 100%;
  height: 100%;
  background: url(../images/bg3.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
  display: none;
}

.answer-page .answer-mask {
  width: 33.8rem;
  height: 16rem;
  margin: 4.8rem auto 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.answer-page .answer-mask .choose-1 {
  position: absolute;
  top: 10.2rem;
  left: 8.5rem;
  width: 8.3rem;
  height: 1.8rem;
}

.answer-page .answer-mask .choose-2 {
  position: absolute;
  top: 10.2rem;
  left: 20rem;
  width: 8.3rem;
  height: 1.8rem;
}

.answer-page .answer-mask .choose-3 {
  position: absolute;
  top: 9.6rem;
  left: 20rem;
  width: 8.3rem;
  height: 1.8rem;
}

.answer-page .answer-mask .choose-1.active:after,
.answer-page .answer-mask .choose-2.active:after,
.answer-page .answer-mask .choose-3.active:after {
  content: '';
  position: absolute;
  left: -1rem;
  top: -.5rem;
  width: 2.8rem;
  height: 2.8rem;
  background: url(../images/active.png) no-repeat center center;
  background-size: cover;
}

.answer-page .answer-mask .temp1{
  width: 33.8rem;
  height: 16rem;
  margin: 4.8rem auto 0;
  width: 2.8rem;
  height: 2.8rem;
  background: url(../images/active.png) no-repeat center center;
  background-size: cover;
}

/* 视频页面 */
.vider-box {
  width: 100%;
  height: 100%;
  background: #FFF0E0;
  background-size: cover;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.vider-box .video-wrap {
  width: 32.016rem;
  height: 18rem;
  overflow: hidden;
  font-size: 0;
  margin-top: 1.5rem;
}

.vider-box #video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  overflow: hidden;
  position: relative;
  left: 1px;
}



/* 最后一页 */
.last-page {
  width: 100%;
  height: 100%;
  background: url(../images/bg3.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
  display: none;



  /* position: absolute;
  left: 0;
  top: 0;
  z-index: 999999; */
}

.last-page .box {
  width: 37rem;
  height: 100%;
  margin: 0 auto;
  position: relative;
  background: url(../images/last-page-box.png) no-repeat center center;
  background-size: contain;
  overflow: hidden;
}

.last-page .box .title {
  margin-top: 7rem;
  height: 1.2rem;
}

.last-page .box .text-1 {
  margin-top: 4.5rem;
  height: 1.2rem;
}

.last-page .box .text-2 {
  margin-top: 1.5rem;
  height: 1.2rem;
}

.last-page .box .title img, .last-page .box .text-1 img, .last-page .box .text-2 img {
  height: 100%;
  display: block;
  margin: 0 auto;
  padding-left: 1.5rem;
  max-width: 26rem;
}

.last-page .mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  z-index: 9999;
}

.last-page .mask .share {
  width: 11rem;
  height: 5rem;
  margin: .5rem 0 0 1rem;
  background: url(../images/share.png) no-repeat center center;
  background-size: contain;
}

.last-page .box .share-btn {
  position: absolute;
  right: 3rem;
  bottom: 0rem;
  width: 7rem;
  height: 10.5rem;
  background: url(../images/share-btn.gif) no-repeat center center;
  background-size: contain;
}
.graph-content{
  display: none;
  position: absolute;
  left: 9%;
  top: 22%;
}
.graph-content2{
  display: none;
  position: absolute;
  left: 9%;
  top: 23%;
}


/*旅游篇 */
.home-page {
  position: absolute;
  /*top: 25%;*/
  bottom:8%;
  left:20%;
  width: 17%;
  height: 18%;
  background: url(../images/car4.gif) no-repeat center center;
  background-size: 100%;
  display: none;
}
/*居家篇 */
.jia-page {
  position: absolute;
  top:8rem;
  left:10%;
  width: 20%;
  height: 100%;
  background: url(../images/car3.gif) no-repeat center center;
  background-size: 100%;
  display: none;
}

/* 答题页 */
.nice-page {
  width: 100%;
  height: 100%;
  background: url(../images/bg3.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
  display: none;
}
.nice-page .nice-mask {
  width: 82%;
  height: 100%;
  /*margin: 4.8rem auto 0;*/
  left:0rem;
  top:8%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.one-page {
  width: 100%;
  height: 100%;
  background: url(../images/bg3.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
  display: none;
}